<template>
  <div class="home">
    <v-header />
    <div class="content">
      <div class="top">
        <el-carousel trigger="click"  height="400px">
          <el-carousel-item v-for="(item,index) in 3" :key="index">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="aitool">
        <h3>AI时代的必备工具，在此</h3>
        <div class="project">
          <ul >
            <li class="item" v-for="(item,index) in items" :key="index">
              <div class="item-img"><img :src=item.url :alt=item.title></div>
              <h4 v-text="item.title"></h4>
              <p v-html="item.content"></p>
              <router-link :to="item.link" class="link">了解详情</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="advantage">
        <div class="wrap">
          <h4>我们的优势</h4>

          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/innovate.png" alt="技术创新驱动">
              <span>技术创新驱动</span>
            </div>
            <div class="wrap-desc">团队由多年经验的营销精英组建，并联合华东师范大学网络信息研究所之智力资源，深耕精准营销行业。</div>
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/enterprises.png" alt="国企背景">
              <span>国企背景</span>
            </div>
            <div class="wrap-desc">国企《理财周刊》传媒集团旗下公司，规章制度健全，业务合法合规。</div>
          </div>
          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/desensitization.png" alt="数据脱敏">
              <span>数据脱敏</span>
            </div>
            <div class="wrap-desc">业务所需数据呈现脱敏处理，并在产品内形成闭环，确保不出局不泄露，安全可靠。</div>
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/service.png" alt="优质服务">
              <span>优质服务</span>
            </div>
            <div class="wrap-desc">致力于为客户提供持续有价值的数字服务为宗旨，全心全力、尽心尽责。</div>
          </div>
          
        </div>
      </div>
      <div class="case">
        <h4>成功案例</h4>
        <div class="case-list">
          <img :src=item.url :alt=item.title v-for="(item,index) in imgUrl" :key="index" />
        </div>
      </div>
      <div class="contact">
        <div class="con-html">
          <h4>联系我们</h4>
          <h5>关于我们</h5>
          <p>上海技筹网络科技有限公司成立于2015年，是国企《理财周刊》财经传媒集团旗下公司。凭借多年积淀的传统传媒营销资源再出发，汇聚新时代营销精英，坚持技术创新驱动，深耕精准营销行业。</p>
          <p>公司已完成与三大运营商、车辆和交通大数据平台的数据对接及资源储备，并联合华东师范大学网络信息研究所之智力资源，为客户提供精准营销和个性化大数据解决方案。</p>
          <p class="linkman">联系人：陈亮 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 电话&微信：13818329960</p>

        </div>
      </div>
    </div>
    <v-contact/>
    <v-footer/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items:[
        {title:'来电秀',content:'融合三大运营商修复资源，<br/>为金融行业提供催收业务一站式服务',link:'callshow',url:require('./images/accurate.png')},
        {title:'闪信',content:'融合三大运营商修复资源，<br/>为金融行业提供催收业务一站式服务',link:'letter',url:require('./images/light.png')},
        {title:'失联修复',content:'融合三大运营商修复资源，<br/>为金融行业提供催收业务一站式服务',link:'lostrepair',url:require('./images/repair.png')},
        {title:'精准营销',content:'融合三大运营商修复资源，<br/>为金融行业提供催收业务一站式服务',link:'precision',url:require('./images/toshow.png')}
      ],
      imgUrl:[
        {url:require('./images/bank-china.png'),title:'中国银行'},
        {url:require('./images/acadsac.png'),title:'阿卡索外教网'},
        {url:require('./images/ctrip.png'),title:'携程'},
        {url:require('./images/bank-pingan.png'),title:'中国平安'},
        {url:require('./images/shifubang.png'),title:'师傅邦'},
        {url:require('./images/eleme.png'),title:'饿了么'},
        {url:require('./images/vanke.png'),title:'万科'},
        {url:require('./images/jinshanwei.png'),title:'上海金山卫计委'},
        {url:require('./images/flexible.png'),title:'圆通快递'},
        {url:require('./images/sgm.png'),title:'上海通用汽车'},
      ]
    }
  }
}
</script>
<style scoped>
.content{
  width: 100%;
  background-color: #fff;
}
.top{
  width: 100%;
  box-sizing: border-box;
}
.el-carousel{
  width: 100%;
}
.el-carousel__container div.el-carousel__item:nth-child(3){
  width: 100%;
  background: url('./images/B03.jpg') center/cover no-repeat;
}
.el-carousel__container div.el-carousel__item:nth-child(4){
  width: 100%;
  background: url('./images/B01.jpg') center/cover no-repeat;
}
.el-carousel__container div.el-carousel__item:nth-child(5){
  width: 100%;
  background: url('./images/B02.jpg') center/cover no-repeat;
}
.el-carousel__item h3{
  font-weight: 600;
  line-height: 400px;
  font-size: 24px;
  color: #FFFFFF;
  display: inline-block;
  margin: 0;
  padding: 0
}
.aitool{
  width: 100%;
  height: 450px;
}
.aitool h3{
  font-weight: 600;
  font-size: 24px;
  color: #3E4D60;
  text-align: center;
  padding-top: 60px;
  box-sizing: content-box;
  margin: 0;
}
.project{
  width: 1100px;
  margin: 0 auto;
}
.project ul{
  width: 100%;
  margin: 0;
  padding: 20px 0 0;
}
.project ul li{
  width: 25%;
  float: left;
  list-style: none
}
.project ul li .item-img{
  width: 90px;
  height: 90px;
  margin: 25px auto 0;
}
.project ul li img{
  display: inline-block;
  transform: scale(0.8);
  
}
.project ul li.item h4{
  font-weight: 600;
  margin:10px auto 20px;
  font-size: 18px;
  color: #333333;
}
.project ul li.item p{
  font-size: 13px;
  color: #666666;
  line-height: 25px;
}
.project ul li.item .link{
  text-decoration: none;
  margin: 0 auto;
  width: 80px;
  height: 35px;
  display: block;
  background-color:  #3DD18F;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  line-height: 35px;
  text-align: center
}
.advantage{
  width: 100%;
  height:480px;
  background: url('./images/home2.jpg') center/cover no-repeat;
}
.wrap{
  width: 1000px;
  margin: 0 auto;
}
.wrap h4{
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0 auto;
  padding: 40px 0 10px;
  box-sizing: content-box
}
.wrap .wrap-item{
  width: 50%;
  text-align: left;
  float: left;
  margin-top: 30px;
}
.wrap .wrap-item .wrap-pic{
  width: 100%;

}
.wrap .wrap-item .wrap-pic img{
  width: 70px;
  height: 70px;
  vertical-align: middle;
}
.wrap .wrap-item .wrap-pic span{
  display: inline-block;
  color: #fff;
  margin-left: 20px;
  font-size: 20px;
}
.wrap .wrap-item .wrap-desc{
  width: 80%;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
  margin-top: 10px;
}
.mar-r .wrap-pic img,.mar-r .wrap-desc{
  margin-left: 50px;
}
.case{
  height: 400px;
  box-sizing: content-box;
}
.case h4{
  margin: 0 auto;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
  color: #3E4D60;
  padding: 40px 0 30px;
}
.case .case-list{
  width: 1000px;
  margin: 0 auto;
}
.case .case-list img{
  width: 135px;
  height: 101px;
  margin-bottom: 20px;
  display: inline-block;
  margin-right: 50px;
}
.case .case-list img:nth-child(5n){
  margin-right: 0;
}
.contact{
  width: 100%;
  height: 370px;
  background: url('./images/home3.jpg') center/cover no-repeat ;
  
}
.contact .con-html{
  box-sizing: content-box;
  width: 1000px;
  color: #FFFFFF;
  margin: 0 auto;
}
.contact .con-html h4{
  text-align: center;
  font-size: 24px;
  padding: 40px 0 30px;
  font-weight: 600;
  margin: 0;
}
.contact .con-html h5{
  font-weight: 500;
  text-align: left;
  font-size: 18px;
  margin: 10px 0 20px;
}
.contact .con-html p{
  text-align: left;
  line-height: 25px;
}
.contact .con-html p.linkman{
  margin-top: 25px;
}
</style>
  